<template>
	<view class="refund-detail">
		<view class="card">
			<view class="header">
				<text class="shop">{{ orderInfo.merchantName || '海D捞旗舰店' }}</text>
				<text class="status" v-if="mode==='view'">{{ mapRefundStatus(status) }}</text>
			</view>
			<view class="item">
				<image class="pic" :src="getImageUrl(itemInfo.coverImage)" mode="aspectFill" />
				<view class="meta">
					<text class="title">{{ itemInfo.title || '商品' }}</text>
					<text class="qty">数量：x{{ itemInfo.quantity || '-' }}</text>
				</view>
				<text class="price">¥{{ itemInfo.price || '-' }}</text>
			</view>
			<view v-if="orderInfo.originalAmount && Number(orderInfo.originalAmount) !== Number(orderInfo.totalAmount)" class="order-amount">
				<view class="amount-row">
					<text class="label">订单原价：</text>
					<text class="original-amount">¥{{Number(orderInfo.originalAmount).toFixed(2)}}</text>
				</view>
				<view v-if="orderInfo.discountAmount && Number(orderInfo.discountAmount) > 0" class="amount-row discount-row">
					<text class="label">优惠金额：</text>
					<text class="discount-amount">-¥{{Number(orderInfo.discountAmount).toFixed(2)}}</text>
				</view>
				<view class="amount-row total-row">
					<text class="label">实付金额：</text>
					<text class="total-amount">¥{{Number(orderInfo.totalAmount).toFixed(2)}}</text>
				</view>
			</view>
		</view>

		<view class="section">
			<text class="label">退款原因</text>
			<textarea class="textarea" v-model="reason" :disabled="mode==='view'" placeholder="请填写退款原因"></textarea>
		</view>

		<view class="section" v-if="mode==='view'">
			<text class="label">处理进度</text>
			<view class="info">
				<text>状态：{{ mapRefundStatus(status) }}</text>
				<text v-if="createdAt">申请时间：{{ formatTime(createdAt) }}</text>
			</view>
		</view>

		<button v-if="mode==='new'" class="submit" :disabled="submitting" @click="submit">{{ submitting ? '提交中...' : '提交申请' }}</button>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data(){
		return {
			mode: 'new',
			refundId: null,
			orderInfo: { id: null, merchantName: '海D捞旗舰店', totalAmount: null, originalAmount: null, discountAmount: null },
			itemInfo: { id: null, title: '', price: '', quantity: 1, coverImage: '' },
			reason: '',
			status: 'PENDING',
			createdAt: '',
			submitting: false
		}
	},
	onLoad(options){
		if(options && options.refundId){
			this.mode = 'view';
			this.refundId = options.refundId;
			this.loadDetail();
		}else if(options && options.order){
			try{
				const data = JSON.parse(decodeURIComponent(options.order));
				if(data.order) this.orderInfo = data.order;
				if(data.item) this.itemInfo = data.item;
			}catch{}
		}
	},
	methods:{
		async loadDetail(){
			try{
				const res = await api.getRefundDetail(this.refundId);
				if(res.code===0){
					const data = res.data || {};
					this.orderInfo = data.order || this.orderInfo;
					this.itemInfo = data.item || this.itemInfo;
					this.reason = data.reason || '';
					this.status = data.status || 'PENDING';
					this.createdAt = data.createdAt || '';
				}else{
					uni.showToast({ icon:'none', title: res.message || '数据加载失败' });
				}
			}catch{
				uni.showToast({ icon:'none', title: '数据加载失败' });
			}
		},
		mapRefundStatus(s){ const m={PENDING:'处理中',APPROVED:'已通过',REJECTED:'已拒绝',COMPLETED:'已完成'}; return m[s]||'处理中'; },
		formatTime(t){ if(!t) return ''; try{ return t.replace('T',' ').substring(0,19); }catch{ return t; } },
		getImageUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		},
		async submit(){
			if(this.submitting) return;
			if(!this.reason){ uni.showToast({ icon:'none', title:'请填写原因' }); return; }
			this.submitting = true;
			try{
				const payload = { orderId: this.orderInfo.id, orderItemId: this.itemInfo.id, reason: this.reason };
				const res = await api.applyRefund(payload);
				if(res.code===0){
					uni.showToast({ title:'提交成功' });
					setTimeout(()=>{ uni.redirectTo({ url:'/pages/order/index?tab=refund' }); }, 600);
				}else{
					uni.showToast({ icon:'none', title: res.message || '提交失败' });
				}
			}catch{
				uni.showToast({ icon:'none', title:'提交失败' });
			}
			finally{ this.submitting = false; }
		}
	}
}
</script>

<style>
.refund-detail{ padding: 24rpx; display:flex; flex-direction: column; gap: 24rpx; }
.card{ background:#fff; border-radius: 18rpx; padding: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.06); }
.header{ display:flex; justify-content: space-between; align-items:center; margin-bottom: 16rpx; }
.shop{ font-size: 30rpx; font-weight: 600; color:#333; }
.status{ font-size: 26rpx; color:#ff7a45; }
.item{ display:flex; align-items:center; gap: 16rpx; }
.pic{ width: 140rpx; height: 140rpx; border-radius: 12rpx; background:#fafafa; }
.meta{ flex:1; }
.title{ font-size: 28rpx; color:#333; }
.qty{ font-size: 24rpx; color:#666; margin-top: 6rpx; }
.price{ font-size: 28rpx; color:#ff4d4f; font-weight: 600; }
.order-amount{ margin-top: 16rpx; padding-top: 16rpx; border-top: 2rpx solid #f4f5f6; display:flex; flex-direction: column; gap: 8rpx; }
.amount-row{ display:flex; justify-content: space-between; align-items:center; font-size: 26rpx; }
.amount-row .label{ color:#666; }
.original-amount{ color:#999; text-decoration: line-through; }
.discount-row .label{ color:#ff7a45; }
.discount-amount{ color:#ff7a45; }
.total-row .label{ color:#333; font-weight: 600; }
.total-amount{ color:#ff4d4f; font-weight: 700; font-size: 28rpx; }
.section{ background:#fff; border-radius: 18rpx; padding: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05); }
.label{ font-size: 26rpx; color:#555; display:block; margin-bottom: 12rpx; }
.textarea{ width: 100%; min-height: 160rpx; background:#f7f7f8; border-radius: 12rpx; padding: 18rpx 20rpx; font-size: 28rpx; }
.info{ display:flex; flex-direction: column; gap: 10rpx; color:#666; font-size: 26rpx; }
.submit{ margin-top: 20rpx; background: linear-gradient(135deg,#ff7a45,#ff4d4f); color:#fff; border-radius: 20rpx; padding: 20rpx 0; font-size: 30rpx; width: 100%; }
.submit:disabled{ opacity:.6; }
</style>

